
<template>
  <div class="page-config-panel">
    <el-form label-width="80px" size="small">
      <el-form-item label="页面标题">
        <el-input v-model="localPageConfig.title" />
      </el-form-item>

      <el-divider>背景设置</el-divider>

      <el-form-item label="背景色">
        <el-color-picker v-model="localPageConfig.backgroundColor" />
      </el-form-item>

      <el-form-item label="背景图">
        <ImagePicker 
          :initial-image="localPageConfig.backgroundImage ? { url: localPageConfig.backgroundImage } : null"
          @select="handleBackgroundImageSelect"
        />
      </el-form-item>

      <el-form-item label="背景样式">
        <el-radio-group v-model="localPageConfig.backgroundStyle">
          <el-radio label="cover">覆盖</el-radio>
          <el-radio label="contain">包含</el-radio>
          <el-radio label="repeat">重复</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider>页面设置</el-divider>

      <el-form-item label="页面边距">
        <el-slider 
          v-model="localPageConfig.margin" 
          :min="0" 
          :max="30" 
          show-input 
          input-size="small"
        />
      </el-form-item>           

      <el-divider>高级设置</el-divider>

      <el-form-item label="分享标题">
        <el-input v-model="localPageConfig.shareTitle" placeholder="默认使用页面标题" />
      </el-form-item>

      <el-form-item label="分享描述">
        <el-input 
          v-model="localPageConfig.shareDescription" 
          type="textarea" 
          :rows="3"
          placeholder="请输入分享描述"
        />
      </el-form-item>

      <el-form-item label="分享图片">
        <ImagePicker 
          :initial-image="localPageConfig.shareImage ? { url: localPageConfig.shareImage } : null"
          @select="handleShareImageSelect"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import ImagePicker from '@/components/ImagePicker/index.vue'

// 定义组件属性
const props = defineProps({
  pageConfig: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update'])

// 本地数据
const localPageConfig = ref({ 
  title: '页面标题',
  backgroundColor: '#ffffff',
  backgroundImage: '',
  backgroundStyle: 'cover',
  margin: 0,
  showNavbar: true,
  navbarColor: '#ffffff',
  navbarTextColor: '#333333',
  shareTitle: '',
  shareDescription: '',
  shareImage: '',
  ...props.pageConfig
})

// 监听数据变化
watch(localPageConfig, (newVal) => {
  emit('update', newVal)
}, { deep: true })

// 处理背景图片选择
function handleBackgroundImageSelect(image) {
  // 处理图片选择或删除
  let imageUrl = ''
  if (image && image.url) {
    imageUrl = image.url
    // 处理图片URL，确保正确显示
    if (imageUrl && !imageUrl.startsWith('http')) {
      if (imageUrl.startsWith('/profile')) {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      } else {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      }
    }
  }

  // 更新本地配置（包括删除情况）
  localPageConfig.value.backgroundImage = imageUrl
  // 触发更新事件
  emit('update', { ...localPageConfig.value, backgroundImage: imageUrl })
}

// 处理分享图片选择
function handleShareImageSelect(image) {
  // 处理图片选择或删除
  let imageUrl = ''
  if (image && image.url) {
    imageUrl = image.url
    // 处理图片URL，确保正确显示
    if (imageUrl && !imageUrl.startsWith('http')) {
      if (imageUrl.startsWith('/profile')) {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      } else {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      }
    }
  }

  // 更新本地配置（包括删除情况）
  localPageConfig.value.shareImage = imageUrl
  // 触发更新事件
  emit('update', { ...localPageConfig.value, shareImage: imageUrl })
}
</script>

<style lang="scss" scoped>
.page-config-panel {
  padding: 10px;
}
</style>
